<template>
  <div id="checkbookanswer">
    <div class="c-headcer">
       <h3>多选题(每题5分)</h3>
    </div>
    <!-- 试题详情 -->
    <div class="c-body">
      <p style="height:50px;line-height:50px">第1题:&nbsp;{{topic}}</p>
      <div class="choose" style="height:300px;line-height:50px">
        <input type="checkbox" title="a" name="choose" checked>A、{{answer1}}<br/>
        <input type="checkbox" title="b" name="choose" checked>B、{{answer2}}<br/>
        <input type="checkbox" title="c" name="choose" disabled>C、{{answer3}}<br/>
        <input type="checkbox" title="d" name="choose" disabled>D、{{answer4}}<br/>
        
      </div>
      <div class="rightanswer" style="height:300px;line-height:50px">
        <h4>正确答案: 答案一： {{rightanswer1}} 答案二：{{rightanswer2}}</h4>
        <h4>本题得分:  {{points}}</h4>
        <h4>答案解析：</h4>
        <div class="result">
          <p>
            {{result}}
          </p>
        </div>
        <div class="turn">
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left" disabled>上一题</el-button>
          <el-button type="primary">下一题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        topic:'Vue的事件修饰符是（）',
        answer1:'.stop',
        answer2:'.prevent',
        answer3:'.once',
        answer4:'.enter',
        points:'5分',
        rightanswer1:'.stop',
        rightanswer2:'.prevent',
        result:'1).stop:等同于`JavaScript`中的`event.stopPropagation()，防止事件冒泡2).prevent:等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）3).capture:与事件冒泡的方向相反，事件捕获由外到内4).self:只会触发自己范围内的事件，不包含子元素5).once:只会触发一次6).enter:键盘修饰符'
      }
    },  
      
  }
</script>

<style lang="less" scoped>
</style>